<template>
  <div class="left-bottom">
   
    <div class="editor-header">组件列表</div>
    <div class="editor-comp-list">
      <draggable class="comp-list" :sort="false" :group="{name:'phone',pull:'clone',put:false}">
        <div class="comp-btn" v-for="(item,index) in componentsType" :key="item.id" @click="tapAdd(index)">
          <i class="comp-btn-icon" :class="item.iconClass" />
          <div class="comp-btn-text">{{item.label}}</div>
        </div>
      </draggable>
    </div>

  </div>
</template>
<script scoped>
import draggable from "vuedraggable";
export default {
  name: "custpageEditorCompList",
  components: {
    draggable
  },
  created(){

  },
  mounted(){

  },
  props:{
    componentsType:{
      type:Array,
      default(){
        return
      }
    }
  },
  data() {
    return {
      autoId:1,
      //可以添加的组件清单，label为组件按钮名称，type为组件类型，attrForm为该组件需要填写的属性表单列表
      //attrForm中，field代表数据存储字段，label为表单名称，type为表单类型
      //placeholder为输入框、选择框等默认的提示文字
      //当类型为swiper轮播器时,limit代表图片数量
    };
  },
  methods: {
    tapAdd(index){
       let newComp = {
        fixed:false,
        label:this.componentsType[index].label,
        name:this.componentsType[index].defaultName ? this.componentsType[index].defaultName : this.componentsType[index].label,
        type:this.componentsType[index].type,
        width:this.componentsType[index].width,
        height:this.componentsType[index].height,
        id:this.autoId,
        attrForm:this.componentsType[index].attrForm,
        data:{},
      };
      this.autoId++;
      this.$emit('addNewComp',newComp);
    }
  },

};
</script>

<style scoped>
.left-bottom{height:100%}
.editor-comp-list{}
.comp-list{-ms-overflow-style:none;display:flex;flex-wrap: wrap;height:100%;align-content: flex-start;overflow: auto;justify-content: flex-start;}
.comp-list::-webkit-scrollbar {width: 0 !important;}
.comp-list::-webkit-scrollbar {width: 0 !important;height: 0;}
.comp-btn{border:1px dashed #ccc;display: flex;flex-direction: column;justify-content: center;align-items: center;width:90px;height:90px;cursor: pointer;}
.comp-btn:hover{background: #eee;}
.comp-btn-icon{font-size:32px;margin-bottom:10px;}
.comp-btn-text{font-size:14px;}

</style>
